.design-wrapper
  %h1.design-h1
    = "Sharetribe Design Components"

  %h2.design-h2
    = "Typography"

  .design-section

    %h3.design-h3
      = "Font sizes"

    .design-component
      .design-example
        .design-small-type
          Small
        .design-normal-type
          Normal
        .design-big-type
          Big
        .design-large-type
          Large
        .design-larger-type
          Larger
        .design-huge-type
          Huge
        .design-mega-type
          Mega
        .design-giga-type
          Giga
      .design-code
        %pre
          :plain
            .class-with-giga-type {
              @include giga-type;
            }

  %h2.design-h2
    = "Forms"

  .design-section

    %h3.design-h3
      = "Buttons"

    .design-component
      .design-example
        %a.button
          .content
            = "This is a link styled like a button"
        %a.button
          .content
            = "This is a button"
            %br/
            = "in two lines"
        %button
          .content
            = "This is a <button> element"
        %a.big-button
          .content
            = "This is a big button"
        %a.big-button
          .content
            = "This is a big button"
            %br/
            = "in two lines"
      .design-code
        %pre
          :plain
            %button
              = "This is button"

  .design-section

    %h3.design-h3
      = "Dropdown menu"

    .design-component
      .design-example
        .toggle-container
          .toggle.hidden{data: {toggle: '#toggle-menu-identifier'}}
            .toggle-header-container
              .toggle-header
                = "Toggle header"

              = icon_tag("dropdown", ["icon-dropdown"])

          #toggle-menu-identifier.toggle-menu.hidden
            %a
              = "Item 1"
            %a
              = "A very long item number #2"
            %a.toggle-menu-subitem
              = "This is a subitem"
            %div.toggle-menu-item
              = "Element doesn't have to be `a`"
            %a
              = "Item 3"
            .toggle-menu-title
              = "Title item"
            %a.toggle-menu-subitem
              = "This is a subitem"
            %a.toggle-menu-subitem
              = "This is a subitem"
      .design-code
        %pre
          :plain
            .toggle.with-borders.hidden{data: {toggle: '#toggle-menu-with-borders-identifier'}}
              .toggle-header-container
                .toggle-header
                  = "Toggle header"

                = icon_tag("dropdown", ["icon-dropdown"])

            #toggle-menu-identifier.toggle-menu.hidden
              %a
                = "Item 1"
              %a
                = "A very long item number #2"
              %a.toggle-menu-subitem
                = "This is a subitem"
              %a
                  = "Item 3"

  .design-section

    %h3.design-h3
      = "Dropdown menu with borders"

    .design-component
      .design-example
        .toggle-container
          .toggle.with-borders.hidden{data: {toggle: '#toggle-menu-with-borders-identifier'}}
            .toggle-header-container
              .toggle-header
                = "Toggle header"

              = icon_tag("dropdown", ["icon-dropdown"])

          #toggle-menu-with-borders-identifier.toggle-menu.hidden
            %a
              = "Item 1"
            %a
              = "A very long item number #2"
            %a.toggle-menu-subitem
              = "This is a subitem"
            %a
              = "Item 3"
      .design-code
        %pre
          :plain
            .toggle.with-borders.hidden{data: {toggle: '#toggle-menu-with-borders-identifier'}}
              .toggle-header-container
                .toggle-header
                  = "Toggle header"

                = icon_tag("dropdown", ["icon-dropdown"])

            #toggle-menu-with-borders-identifier.toggle-menu.hidden
              %a
                = "Item 1"
              %a
                = "A very long item number #2"
              %a.toggle-menu-subitem
                = "This is a subitem"
              %a
                  = "Item 3"

  .design-section

    %h3.design-h3
      = "Sortable list"

    .design-component
      .design-example
        #sortable-row1.sortable-row
          .design-block
            .design-sort-title= "Bananas"
            .design-sort-arrows
              %a.design-sort-arrow.arrow-up="↑"
              %a.design-sort-arrow.arrow-down="↓"
        #sortable-row2.sortable-row
          .design-block
            .design-sort-title= "Oranges"
            .design-sort-arrows
              %a.design-sort-arrow.arrow-up="↑"
              %a.design-sort-arrow.arrow-down="↓"
        #sortable-row3.sortable-row
          .design-block
            .design-sort-title= "Apples"
            .design-sort-arrows
              %a.design-sort-arrow.arrow-up="↑"
              %a.design-sort-arrow.arrow-down="↓"
          #sortable-sub-row1.sortable-sub-row
            .design-block
              .design-sort-title.sub= "Red Apple"
              .design-sort-arrows
                %a.design-sort-arrow.sub-arrow-up="↑"
                %a.design-sort-arrow.sub-arrow-down="↓"
          #sortable-sub-row2.sortable-sub-row
            .design-block
              .design-sort-title.sub= "Green Apple"
              .design-sort-arrows
                %a.design-sort-arrow.sub-arrow-up="↑"
                %a.design-sort-arrow.sub-arrow-down="↓"

      - content_for :extra_javascript do
        :javascript
          var fieldMap = $(".sortable-row").map(function(id, row) {
            return {
              id: $(row).attr("id"), // Id, that identifies the sortable row
              element: $(row), // jQuery element of a sortable row
              up: $(".arrow-up", row),
              down: $(".arrow-down", row)
            };
          }).get();

          orderManager = window.ST.orderManager(fieldMap);
          orderManager.order.changes().onValue(function(orderStatus) {
            // Do something with the orderStatus
          });

          var subFieldMap = $(".sortable-sub-row").map(function(id, row) {
            return {
              id: $(row).attr("id"), // Id, that identifies the sortable row
              element: $(row), // jQuery element of a sortable row
              up: $(".sub-arrow-up", row),
              down: $(".sub-arrow-down", row)
            };
          }).get();

          orderManager = window.ST.orderManager(subFieldMap);
          orderManager.order.changes().onValue(function(orderStatus) {
            // Do something with the orderStatus
          });

      .design-code
        %pre
          :plain
            #sortable-row1.sortable-row.design-block
              .design-sort-title= "Banana"
              .design-sort-arrows
                %a.design-sort-arrow.arrow-up="↑"
                %a.design-sort-arrow.arrow-down="↓"
            #sortable-row2.sortable-row.design-block
              .design-sort-title= "Orange"
              .design-sort-arrows
                %a.design-sort-arrow.arrow-up="↑"
                %a.design-sort-arrow.arrow-down="↓"
            #sortable-row3.sortable-row.design-block
              .design-sort-title= "Apple"
              .design-sort-arrows
                %a.design-sort-arrow.arrow-up="↑"
                %a.design-sort-arrow.arrow-down="↓"

            - content_for :extra_javascript do
              :javascript
                var fieldMap = $(".sortable-row").map(function(id, row) {
                  return {
                    id: $(row).attr("id"),
                    element: $(row),
                    up: $(".arrow-up", row),
                    down: $(".arrow-down", row)
                  };
                }).get();

                orderManager = window.ST.orderManager(fieldMap);
                orderManager.order.changes().onValue(function(orderStatus) {
                  // Do something with the orderStatus
                });

  .design-section

    %h3.design-h3
      = "Range slider"

    .design-component
      .design-example
        #design-range-slider.range-slider
          - content_for :extra_javascript do
            :javascript
              $("#design-range-slider").noUiSlider({
                range: [0, 100]
                ,start: [20, 80]
                ,connect: true
              });

      .design-code
        %pre
          :plain
            #design-range-slider.range-slider
              - content_for :extra_javascript do
                :javascript
                  $("#design-range-slider").noUiSlider({
                    range: [0, 100]
                    ,start: [20, 80]
                    ,connect: true
                  });

  %h2.design-h2
    = "Responsive utilities"

  .design-section
    %h3.design-h3
      = "Media queries"

    .design-component
      .design-example
        .design-mq-tiny-mobile
          = "Tiny mobile"
        .design-mq-mobile
          = "Mobile"
        .design-mq-large-mobile
          = "Large mobile"
        .design-mq-small-tablet
          = "Small tablet"
        .design-mq-tablet
          = "Tablet"
        .design-mq-small-desktop
          = "Small desktop"
        .design-mq-mid-desktop
          = "Mid desktop"
        .design-mq-desktop
          = "Desktop"
      .design-code
        %pre
          :plain
            .hide-on-mobile-desives {
              display: none;

              @import media(tablet) {
                display: block;
              }
            }

  .design-section
    %h3.design-h3
      = "Helper classes"

    .design-component
      .design-example
        .design-block.visible-tablet
          = "Visible on tablet and up"
        .design-block.hidden-tablet
          = "Hidden on tablet and up"
      .design-code
        %pre
          :plain
            .visible-tablet
              = "Visible on tablet and up"
            .hidden-tablet
              = "Hidden on tablet and up"

  %h2.design-h2
    = "Layout and positioning"

  .design-section
    %h3.design-h3
      = "Fluid grid"

    .design-component
      .design-example
        - (1..11).each do |i|
          .row
            %div{class: "col-#{i}" }
              .col-content
                = ".col-#{i}"
            %div{class: "col-#{12-i}" }
              .col-content
                = ".col-#{12-i}"
        .row
          .col-12
            .col-content
              = ".col-12"
      .design-code
        %pre
          :plain
            .row
              .col-1
                = "Col 1"
              .col-11
                = "Col 11"

  .design-section
    %h3.design-h3
      = "Nested fluid grid"

    .design-component
      .design-example
        .row
          .col-6
            .col-content
              = ".col-6"
              .row
                .col-4
                  .col-content
                    = ".col-4"
                .col-4
                  .col-content
                    = ".col-4"
                .col-4
                  .col-content
                    = ".col-4"
          .col-6
            .col-content
              = ".col-6"
              .row
                .col-3
                  .col-content
                    = ".col-3"
                .col-3
                  .col-content
                    = ".col-3"
                .col-3
                  .col-content
                    = ".col-3"
                .col-3
                  .col-content
                    = ".col-3"
      .design-code
        %pre
          :plain
            .row
              .col-12
                .row
                  .col-6
                    = "Nested col-6 inside col-12"
                  .col-6
                    = "Nested col-6 inside col-12"

  .design-section
    %h3.design-h3
      = "Fluid thumbnail grid"
    .design-component
      .design-example
        .design-fluid-thumbnail-grid
          - (1..24).map do |i|
            .design-fluid-thumbnail-grid-item
              .design-fluid-thumbnail-grid-item-fixed-height
                = "Thumbnail #{i}"
      .design-code
        %pre
          :plain
            # To use fluid grid, you have to first create it. The following command will create a fluid grid prefixed with `design`:

            @include create-fluid-thumbnail-grid(design, 1, 1, 2, 2, 3, 3, 4, 5);

            After you have created the grid, you can use it like this:

            .design-fluid-thumbnail-grid
                .design-fluid-thumbnail-grid-item
                  %div
                    = "Thumbnail 1"
                .design-fluid-thumbnail-grid-item
                  %div
                    = "Thumbnail 2"

  .design-section
    %h3.design-h3
      = "Fluid thumbnail grid with 3/2 aspect ratio"
    .design-component
      .design-example
        .design-fluid-thumbnail-grid
          - (1..24).map do |i|
            .design-fluid-thumbnail-grid-item
              = image_tag("empty_3x2.gif", :class => "design-fluid-thumbnail-grid-item-3x2")
      .design-code
        %pre
          :plain
            Use an empty image to get the correct aspect ratio

  %h2.design-h2
    = "Tables"

  .design-section
    %h3.design-h3
      = "Simple table layout"
    .design-component
      .design-example
        %table
          %thead
            %tr
              %th= "Name"
              %th= "Email"
              %th= "Join date"
          %tbody
            %tr
              %td= "Essi Example"
              %td= "essi@example.com"
              %td= "2013-05-27 21:40:59"
            %tr
              %td= "Jack Example"
              %td= "jack@example.com"
              %td= "2013-01-27 21:40:59"
            %tr
              %td= "Simon Example"
              %td= "simon@example.com"
              %td= "2012-05-27 21:40:59"
            %tr
              %td= "Jantus Cantus"
              %td= "jant1234@example.com"
              %td= "2011-01-27 21:40:59"
            %tr
              %td= "strange guy"
              %td= "guy@example.com"
              %td= "2012-05-27 21:40:59"

  %h2.design-h2
    = "Lists"

  .design-section
    %h3.design-h3
      = "Simple textual list of things"
    .design-component
      .design-example
        %ul.no-bullets
          %li
            %div
              Name
          %li
            %div
              Email
          %li
            %div
              Join date

  %h2.design-h2
    = "Images"

  .design-section
    %h3.design-h3
      = "Block element with aspect ratio (Image frame)"
    .design-component
      .design-example
        .design-max-width-300
          .design-aspect-ratio
            .design-aspect-ratio-content

      .design-code
        %pre
          :plain

  .design-section
    %h3.design-h3
      = "Fluid image frame with vertically/horizontally centered 100% width/height image"
    .design-component
      .design-example
        .design-max-width-300
          .design-aspect-ratio
            .design-aspect-ratio-content
              .design-vertical-centering-content-too-wide
                = image_tag "design/landscape_small.png", :class => "design-image-too-wide"
        .design-max-width-300
          .design-aspect-ratio
            .design-aspect-ratio-content
              .design-vertical-centering-content-too-wide
                = image_tag "design/landscape_large.png", :class => "design-image-too-wide"
        .design-max-width-300
          .design-aspect-ratio
            .design-aspect-ratio-content
              .design-vertical-centering-content-too-narrow
                = image_tag "design/landscape_almost_square.png", :class => "design-image-too-narrow"
        .design-max-width-300
          .design-aspect-ratio
            .design-aspect-ratio-content
              .design-vertical-centering-content-too-narrow
                = image_tag "design/portrait_small.png", :class => "design-image-too-narrow"
        .design-max-width-300
          .design-aspect-ratio
            .design-aspect-ratio-content
              .design-vertical-centering-content-too-narrow
                = image_tag "design/portrait_large.png", :class => "design-image-too-narrow"
        .design-max-width-300
          .design-aspect-ratio
            .design-aspect-ratio-content
              .design-vertical-centering-content-too-narrow
                = image_tag "design/portrait_almost_square.png", :class => "design-image-too-narrow"

      .design-code
        %pre
          :plain

  %h2.design-h2
    = "Components"

  .design-section
    %h3.design-h3
      = "Thumbnail stripe"
    .design-component
      .design-example
        %a#design-thumbnail-stripe-prev{href: "#"}="Prev"
        %a#design-thumbnail-stripe-next{href: "#"}="Next"
        #design-thumbnail-stripe.thumbnail-stripe

    - content_for :extra_javascript do
      :javascript
        var stripe;

        $("#design-thumbnail-stripe-next").click(function(e) {
          e.preventDefault();
          stripe.next();
        });

        $("#design-thumbnail-stripe-prev").click(function(e) {
          e.preventDefault();
          stripe.prev();
        });

        var elements = _.range(0, 10).map(function(i) {
          var el = $("<div class='thumbnail-stripe-item'>" + i + "</div>");
          el.click(function() {
            stripe.show(i);
          })
          return el;
        });

        var stripe = ST.thumbnailStripe($("#design-thumbnail-stripe"), elements, {paddingAdjustment: 6});

        stripe.show(0);

  .design-section
    %h3.design-h3
      = "Radio buttons"
    .design-component
      .design-example
        / It's a good idea to use server rendering to render the initially selected value
        - selected = "reject"

        .radio-button-value
          %label
            This input contains the radiobutton value
          %input.js-radio-button-value{value: selected == "accept" ? "accept" : "reject" }
          %br/
          %br/

        .radio-buttons
          %a.radio-button.radio-button-positive.js-accept-radio-button{ data: { :"radio-button-value" => "accept"}, class: selected == "accept" ? "radio-button-selected" : "" }
            .radio-button-icon{class: icon_for("accepted")}
            .radio-button-label= t("conversations.accept.accept_request")
          %a.radio-button.radio-button-negative.js-reject-radio-button{ data: { :"radio-button-value" => "reject"}, class: selected == "reject" ? "radio-button-selected" : "" }
            .radio-button-icon{class: icon_for("rejected")}
            .radio-button-label= t("conversations.accept.reject_request")

        - content_for :extra_javascript do
          :javascript
            ST.initializeRadioButtons({
              buttons: [".js-accept-radio-button", ".js-reject-radio-button"],
              input: ".js-radio-button-value",
              callback: function(sel, el) { console.log(sel, el) } });
